<template>
  <div class="all">
    <label for="cNumber">快递单号：</label>
    <input
      :disabled="formInline.state == '已发货' || formInline.state == '已完成'"
      type="text"
      name="cNumber"
      placeholder="请输入快递单号"
      v-model="formInline.cNumber"
    />
    <br/>
    <!-- <router-link tag="button" class="action" @click="goOrder">确定</router-link> -->
<!--    <button class="action" @click="goOrder">确定</button>-->
    <input class="action" type="button" value="确定" @click="goOrder" />
  </div>
</template>

<script>
  import {changeOrderState2} from "../api/merchant";
  import axios from "axios";

  export default {
    data() {
      return {
        formInline: {
          cNumber: this.$route.query.cnumber,
          state: this.$route.query.state
        },
        state: "",
      };
    },
    methods: {
      //根据路由的方法，再跳转路由
      goOrder() {
        this.changeOrderState2();

      },

      //调用后台的方法
      changeOrderState2() {
        //快递单号为空时不能发货
        if (this.formInline.cNumber === "") {
          return;
        }
        //ajax方法
        changeOrderState2({
          oState: '已发货',
          uid: this.$route.query.state_uid,
          gid: this.$route.query.state_gid,
          mid: this.$route.query.state_mid,
          cNumber: this.formInline.cNumber,
        }).then((result) => {
          this.$router.push({
            name: "order",
          });
          //接受后台传输的数据（未使用）
          this.state = result.data.data;
          // console.log(res);
        });
      },
    },
  };
</script>

<style scoped>
  .all {
    margin-top: 100px;
  }

  input[type="text"] {
    width: 30%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }

  input[type="submit"],
  .action {
    width: 15%;
    background-color: #4caf50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  input[type="submit"]:hover {
    background-color: #45a049;
  }

  .action:hover {
    background-color: #45a049;
  }

  div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    text-align: center;
  }
</style>
